<template>
  <!-- 默认布局 start -->
  <a-layout
    id="defaultLayout"
    class="min-h-[100vh] bg-white pl-[60px]"
  >
    <!-- 头部导航栏 -->
    <GlobalHeader />

    <a-layout class="relative flex !min-h-[100vh] flex-col !bg-white">
      <!-- 视图区域 -->
      <a-layout-content class="flex-1">
        <router-view v-slot="{ Component }">
          <transition
            :name="routerConfig.transition.name"
            :mode="routerConfig.transition.mode"
          >
            <component :is="Component" />
          </transition>
        </router-view>
      </a-layout-content>

      <!-- 底部 -->
      <GlobalFooter />
    </a-layout>

    <!-- 全局用户信息编辑弹窗 -->
    <UserInfoModel ref="userInfoModelRef" />
    <!-- 全局图片编辑弹窗 -->
    <PictureCropperModel
      ref="pictureCropperModelRef"
      @cropped="handleCropped"
    />
  </a-layout>
  <!-- 默认布局 end -->
</template>

<script lang="ts" setup>
import { ref, provide } from 'vue';
import GlobalHeader from '@/components/GlobalHeader.vue';
import GlobalFooter from '@/components/GlobalFooter.vue';
import UserInfoModel from '@/components/UserInfoModel.vue';
import { routerConfig } from '@/config';
import PictureCropperModel from '@/components/PictureCropperModel.vue';
import { eventBus, EventNames } from '@/utils/eventBus';

// 用户信息弹窗引用
const userInfoModelRef = ref<InstanceType<typeof UserInfoModel> | null>(null);
// 图片编辑弹窗引用
const pictureCropperModelRef = ref<InstanceType<typeof PictureCropperModel> | null>(null);

// 提供全局方法，供子组件调用
const showUserInfoModal = (userData?: API.UserVO) => {
  if (userData) {
    userInfoModelRef.value?.showModal(userData);
  } else {
    // 如果没有传入用户数据，可以获取当前登录用户
    // 这里需要根据实际情况处理
    console.warn('showUserInfoModal: 需要传入用户数据');
  }
};

// 显示图片编辑弹窗
const showPictureCropperModal = (imageUrl?: string) => {
  pictureCropperModelRef.value?.showModal(imageUrl);
};

// 处理裁切完成事件
const handleCropped = (croppedImageUrl: string) => {
  // 通过事件总线通知 UserInfoModel 设置裁切后的头像
  eventBus.emit(EventNames.AVATAR_CROPPED, croppedImageUrl);
};

// 通过 provide 提供给子组件
provide('showPictureCropperModal', showPictureCropperModal);
provide('showUserInfoModal', showUserInfoModal);
</script>
<style lang="scss" scoped></style>
